<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <span v-show="false">{{ chuli=crud.status.cu > 0?chuli:false }}</span>
        <label class="el-form-item-label">概要</label>
        <el-input v-model="query.svrTitle" clearable placeholder="概要" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">客户编号</label>
        <el-input v-model="query.svrCustNo" clearable placeholder="客户编号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">客户名称</label>
        <el-input v-model="query.svrCustName" clearable placeholder="客户名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">服务状态</label>
        <el-select v-model="query.svrStatus" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @keyup.enter.native="crud.toQuery"
          />
        </el-select>
        <label class="el-form-item-label">分配给的员工编号</label>
        <el-input v-model="query.svrDueId" clearable placeholder="分配给的员工编号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">分配给的员工</label>
        <el-input v-model="query.svrDueTo" clearable placeholder="分配给的员工" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">满意度</label>
        <el-select v-model="query.svrSatisfy" clearable placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @keyup.enter.native="crud.toQuery"
          />
        </el-select>
        <date-range-picker
          v-model="query.svrCreateDate"
          start-placeholder="svrCreateDateStart"
          end-placeholder="svrCreateDateStart"
          class="date-item"
        />
        <rrOperation :crud="crud" />
        </el-select></div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="800px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="180px">
          <span v-show="false" v-if="form.svrStatus=='新创建'">{{ jingdutiao=1 }}</span>
          <span v-show="false" v-if="form.svrStatus=='已分配'">{{ jingdutiao=2 }}</span>
          <span v-show="false" v-if="form.svrStatus=='已处理'">{{ jingdutiao=3 }}</span>
          <span v-show="false" v-if="form.svrStatus=='已反馈'">{{ jingdutiao=4 }}</span>
          <span v-show="false" v-if="form.svrStatus=='已归档'">{{ jingdutiao=5 }}</span>
          <el-radio-group v-model="size">
            <el-radio label="">默认</el-radio>
            <el-radio label="medium">中等</el-radio>
            <el-radio label="small">小型</el-radio>
            <el-radio label="mini">超小</el-radio>
          </el-radio-group>
          <el-descriptions class="margin-top" title="客户服务信息" :column="2" :size="size" border>
            <template slot="extra">
              <el-button type="primary" size="small" @click="chuli=true">操作</el-button>
            </template>
            <el-descriptions-item>
              <template slot="label">
                <i class=" el-icon-s-check" />
                服务类型
              </template>
              <el-tag size="small"> {{ dict.label.svr_type[form.svrType] }}</el-tag>
              <el-option
                v-for="item in dict.svr_type"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                概要
              </template>
              {{ form.svrTitle }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user" />
                客户名称
              </template>
              {{ form.svrCustName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets" />
                客户编号
              </template>
              <el-tag size="small">{{ form.svrCustNo }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-s-promotion" />
                服务请求
              </template>
              {{ form.svrRequest }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-s-release" />
                创建人编号
              </template>
              {{ form.svrCreateId }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-s-custom" />
                创建人名称
              </template>
              {{ form.svrCreateBy }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-date" />
                创建时间
              </template>
              {{ form.svrCreateDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user" />
                分配给的员工姓名
              </template>
              {{ form.svrDueTo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-date" />
                分配时间
              </template>
              {{ form.svrDueDate }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-place" />
                处理人编号
              </template>
              {{ form.svrDealId }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-s-custom" />
                处理人姓名
              </template>
              {{ form.svrDealBy }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-date" />
                处理日期
              </template>
              {{ form.svrDealDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-trophy" />
                处理结果
              </template>
              {{ form.svrDealDate }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <span style="color: red;"><i class="el-icon-star-on" /></span>
                满意度
              </template>
              <span style="color: red;">
                {{ dict.label.cust_satisfy[form.svrSatisfy] }}
              </span>
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-suitcase" />
                服务处理
              </template>
              {{ form.svrDeal }}
            </el-descriptions-item>
            <el-descriptions-item span="2">
              <template slot="label">
                <i class="el-icon-s-claim" />
                服务状态
              </template>
              <el-steps :active="jingdutiao">
                <el-step title="新创建" icon="el-icon-edit" />
                <el-step title="已分配" icon="el-icon-upload" />
                <el-step title="已处理" icon="el-icon-s-promotion" />
                <el-step title="已反馈" icon="el-icon-s-check" />
                <el-step title="已归档" icon="el-icon-s-claim" />
              </el-steps>
            </el-descriptions-item>

          </el-descriptions>
          <el-form-item v-if="chuli" label="服务状态" prop="svrStatus">
            <el-select v-model="form.svrStatus" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="svrId" label="编号" />
        <el-table-column prop="svrType" label="服务类型">
          <template slot-scope="scope">
            {{ dict.label.svr_type[scope.row.svrType] }}
          </template>
        </el-table-column>
        <el-table-column prop="svrTitle" label="概要" />
        <el-table-column prop="svrCustNo" label="客户编号" />
        <el-table-column prop="svrCustName" label="客户名称" />
        <el-table-column prop="svrStatus" label="服务状态">
          <template slot-scope="scope">
            <span style="color: red;">
              {{ dict.label.svr_status[scope.row.svrStatus] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="svrRequest" label="服务请求" />
        <el-table-column prop="svrCreateId" label="创建人编号" />
        <el-table-column prop="svrCreateBy" label="创建人名称" />
        <el-table-column prop="svrCreateDate" label="创建时间" />
        <el-table-column prop="svrDueId" label="分配给的员工编号" />
        <el-table-column prop="svrDueTo" label="分配给的员工" />
        <el-table-column prop="svrDueDate" label="分配时间" />
        <el-table-column prop="svrDeal" label="服务处理	" />
        <el-table-column prop="svrDealId" label="处理人编号" />
        <el-table-column prop="svrDealBy" label="处理人姓名	" />
        <el-table-column prop="svrDealDate" label="处理日期" />
        <el-table-column prop="svrResult" label="结果	" />
        <el-table-column prop="svrSatisfy" label="满意度">
          <template slot-scope="scope">
            <span style="color: red;">
              {{ dict.label.cust_satisfy[scope.row.svrSatisfy] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column v-if="checkPer(['admin','sctService:edit','sctService:del'])" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudSctService from '@/api/sctService'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { svrId: null, svrType: null, svrTitle: null, svrCustNo: null, svrCustName: null, svrStatus: null, svrRequest: null, svrCreateId: null, svrCreateBy: null, svrCreateDate: null, svrDueId: null, svrDueTo: null, svrDueDate: null, svrDeal: null, svrDealId: null, svrDealBy: null, svrDealDate: null, svrResult: null, svrSatisfy: null, isDelete: null }
export default {
  name: 'SctService4',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['svr_type', 'svr_status', 'cust_satisfy'],
  cruds() {
    return CRUD({ title: '客户服务', url: 'api/sctService', idField: 'svrId', sort: 'svrId,desc', crudMethod: { ...crudSctService }})
  },
  data() {
    return {
      chuli: false,
      jingdutiao: 0,
      options: [
        {
          value: '新创建',
          label: '新创建'
        }, {
          value: '已分配',
          label: '已分配',
          disabled: true
        },
        {
          value: '已处理',
          label: '已处理',
          disabled: true
        },
        {
          value: '已反馈',
          label: '已反馈',
          disabled: true
        },
        {
          value: '已归档',
          label: '已归档'
        }],
      options1: [{
        value: 5,
        label: '★★★★★'
      },
      {
        value: 4,
        label: '★★★★☆'
      },
      {
        value: 3,
        label: '★★★☆☆'
      },
      {
        value: 2,
        label: '★★☆☆☆'
      },
      {
        value: 1,
        label: '★☆☆☆☆'
      }],
      // options: [{
      //   value: '新创建',
      //   label: '新创建'
      // }, {
      //   value: '已分配',
      //   label: '已分配'
      // },
      // {
      //   value: '已处理',
      //   label: '已处理'
      // },
      // {
      //   value: '已反馈',
      //   label: '已反馈'
      // },
      // {
      //   value: '已归档',
      //   label: '已归档'
      // }],
      size: '',
      permission: {
        add: ['admin', 'sctService:add'],
        edit: ['admin', 'sctService:edit'],
        del: ['admin', 'sctService:del']
      },
      rules: {
        svrType: [
          { required: true, message: '服务类型不能为空', trigger: 'blur' }
        ],
        svrTitle: [
          { required: true, message: '概要不能为空', trigger: 'blur' }
        ],
        svrCustNo: [
          { required: true, message: '客户编号不能为空', trigger: 'blur' }
        ],
        svrCustName: [
          { required: true, message: '客户名称不能为空', trigger: 'blur' }
        ],
        svrStatus: [
          { required: true, message: '服务状态不能为空', trigger: 'blur' }
        ],
        svrRequest: [
          { required: true, message: '服务请求不能为空', trigger: 'blur' }
        ],
        svrCreateId: [
          { required: true, message: '创建人编号不能为空', trigger: 'blur' }
        ],
        svrCreateBy: [
          { required: true, message: '创建人名称不能为空', trigger: 'blur' }
        ],
        isDelete: [
          { required: true, message: '逻辑删除不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'svrTitle', display_name: '概要' },
        { key: 'svrCustNo', display_name: '客户编号' },
        { key: 'svrCustName', display_name: '客户名称' },
        { key: 'svrStatus', display_name: '服务状态' },
        { key: 'svrDueId', display_name: '分配给的员工编号' },
        { key: 'svrDueTo', display_name: '分配给的员工' },
        { key: 'svrSatisfy', display_name: '满意度' }
      ]
    }
  },
  // created() {
  //   this.crud.params = { svrStatus: '已反馈' }
  //   this.crud.toQuery()
  // },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }
  }
}
</script>

<style scoped>

</style>
